<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app{
        width: 500px;
    }
    .cs{
        display: flex;
    }
</style>
<body>
    <div id="app">
        <div><input type="checkbox" v-model="list2">全选</div>
<ul v-for="item in list">
    <li><input type="checkbox" v-model="item.checked">{{item.name}}</li>
</ul>
<div class="cs">
    <div><input type="checkbox" v-model="res" style="text-align: center;">列表一</div>
    <div>
<ul v-for="item in list3">
    <li>
        <input type="checkbox" v-model="item.checked">{{item.text}}
    </li>
</ul>
</div>
<div>
    <p><button @click="left">&gt</button></p>
    <p><button @click="right">&lt</button></p>
</div>
<div><input type="checkbox" v-model="newres">列表二</div>
<p v-for="item in list4"><input type="checkbox" v-model="item.checked">{{item.text}}</p>
</div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
const {createApp,ref,computed}=Vue
createApp({
    setup(){
        let list=ref([{
					name: "西瓜",
					price: 2,
					num: 5
				}, {
					name: "葡萄",
					price: 3,
					num: 3
				}])
        const list2=computed({
get(){
    return list.value.every(v=>v.checked)
},
set(val){
if(val){
    list.value.forEach(v=>{
        v.checked=true
    })
}else{
    list.value.forEach(v=>{
        v.checked=false
    })
}
}
})
let list3=ref([{
    text:"备选项1",
    checked:false
},
{
    text:"备选项2",
    checked:false
},
{
    text:"备选项3",
    checked:false
},
{
    text:"备选项4",
    checked:false
},
{
    text:"备选项5",
    checked:false
},
{
    text:"备选项6",
    checked:false
},{
    text:"备选项7",
    checked:false
},
{
    text:"备选项8",
    checked:false
},
{
    text:"备选项9",
    checked:false
},{
    text:"备选项10",
    checked:false
},{
    text:"备选项11",
    checked:false
}])
const res=computed({
  get(){
    return list3.value.every(v=>v.checked)
  },set(val){
if(val){
list3.value.forEach(v=>{
    v.checked=true
})
}else{
    list3.value.forEach(v=>{
        v.checked=false
    })
}
  }
})
let list4=ref([])
const newres=computed({
  get(){
    return list4.value.every(v=>v.checked)
  },set(val){
if(val){
list4.value.forEach(v=>{
    v.checked=true
})
}else{
    list4.value.forEach(v=>{
        v.checked=false
    })
}
  }
})
function left() {
        const leftItem = list3.value.filter(v => v.checked)
        list3.value = list3.value.filter(v => !v.checked)
        list4.value = [...list4.value, ...leftItem]
        list4.value.forEach(v => v.checked = false)
      }
      function right() {
        const rightItem = list4.value.filter(v => v.checked)
        list4.value = list4.value.filter(v => !v.checked)
        list3.value = [...list3.value, ...rightItem]
        list3.value.forEach(v => v.checked = false)
      }
        return{
list,list2,list3,res,list4,newres,left,right
        }
    }
}).mount('#app')
</script>
</html>